<!DOCTYPE html>
<html>

	<head>
		<title>WMTS example</title>
		<script src="js/jquery.js"></script>
		<link rel="stylesheet" href="css/bootstrap.css">
		<script src="js/bootstrap.js"></script>
		<link rel="stylesheet" href="css/ol.css" type="text/css">
		<script src="js/ol-debug.js"></script>
	</head>

	<body>
		<div class="container-fluid">

			<div class="row-fluid">
				<div class="span12">
					<div id="map" class="map"></div>
				</div>
			</div>

		</div>
		<script>
		//http://t7.tianditu.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILECOL=14&TILEROW=1&TILEMATRIX=4
			var matrixIds = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19'];
			var resolutions = [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 0.0006866455078125, 0.00034332275390625, 0.000171661376953125, 8.58306884765625e-005, 4.291534423828125e-005, 2.1457672119140625e-005, 1.0728836059570313e-005, 5.36441802978515625e-006, 2.682209014892578e-006, 1.341104507446289e-006];
			var projection = ol.proj.get('EPSG:4326');
			var projectionExtent = projection.getExtent();
			var size = ol.extent.getWidth(projectionExtent) / 256;
			var resolutions = new Array(19);
			var matrixIds = new Array(19);
			for (var z = 0; z < 19; ++z) {
				// generate resolutions and matrixIds arrays for this WMTS
				resolutions[z] = size / Math.pow(2, z);
				matrixIds[z] = z;
			}
			var map = new ol.Map({
				layers: [
					new ol.layer.Tile({
						source: new ol.source.WMTS({
							url: "http://t0.tianditu.com/vec_c/wmts",
							matrixSet: 'EPSG:4326',
							layer: '0',
					        format: 'image/png',
					        projection: 'EPSG:4326',
					        tileGrid: new ol.tilegrid.WMTS({
					          origin: ol.extent.getTopLeft(projectionExtent),
					          resolutions: resolutions,
					          matrixIds: matrixIds
					        }),
					        style: 'default',
					        wrapX: true
						})
					})
				],
				target: 'map',
				view: new ol.View({
					center: [0, 0],
					zoom: 4
				})
			});
		</script>
	</body>

</html>